import React, {useContext, useState} from 'react';
import {makeStyles} from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import {useHistory} from 'react-router-dom'
import Container from "@material-ui/core/Container";
import {AuthContext} from "../contexts/AuthContext";
import {AccountCircle} from "@material-ui/icons";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
import Divider from "@material-ui/core/Divider";
import * as constants from '../constants'

const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
    },
    menuButton: {
        marginRight: theme.spacing(2),
    },
    title: {
        flexGrow: 1,
        cursor: "pointer",
    },
}));

export default function Nav() {
    const classes = useStyles()
    const history = useHistory()
    const {isAuthenticated, dispatch} = useContext(AuthContext)
    const [anchorEl, setAnchorEl] = useState(null);
    const isMenuOpen = Boolean(anchorEl);

    const handleProfileMenuOpen = (event) => {
        setAnchorEl(event.currentTarget);
    };

    const handleMenuClose = () => {
        setAnchorEl(null);
    }

    const goToProfile = () => {
        setAnchorEl(null);
        history.push('/profile')
    };

    const handleLogout = () => {
        setAnchorEl(null);
        dispatch({type: constants.LOGOUT_SUCCESS})
    }

    const changePassword = () => {
        setAnchorEl(null);
        history.push('/change_password')
    }

    const menuId = 'account-menu';
    const renderMenu = (
        <Menu
            anchorEl={anchorEl}
            anchorOrigin={{vertical: 'top', horizontal: 'right'}}
            id={menuId}
            keepMounted
            transformOrigin={{vertical: 'top', horizontal: 'right'}}
            open={isMenuOpen}
            onClose={handleMenuClose}
        >
            <MenuItem onClick={goToProfile}>个人中心</MenuItem>
            <MenuItem onClick={changePassword}>更改密码</MenuItem>
            <Divider/>
            <MenuItem onClick={handleLogout}>退出</MenuItem>
        </Menu>
    );

    return (
        <Container className={classes.root}>
            <AppBar position="static">
                <Toolbar>
                    <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
                        <MenuIcon/>
                    </IconButton>
                    <Typography
                        variant="h6"
                        className={classes.title}
                        onClick={() => history.push('/')}
                    >
                        LOGO
                    </Typography>
                    {
                        isAuthenticated ?
                            (
                                <IconButton
                                    edge="end"
                                    onClick={handleProfileMenuOpen}
                                    color="inherit"
                                >
                                    <AccountCircle/>
                                </IconButton>) :
                            (<Button color="inherit" onClick={() => history.push('/login')}>登录</Button>)
                    }
                </Toolbar>
            </AppBar>
            {renderMenu}
        </Container>
    );
}
